<template>
  <el-row :gutter="40" style="margin:0px;">
    <el-col :lg="20">
      <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="6">
            <el-form-item label="配送商名称" style="width: 100%">
              <el-input v-model="queryParams.customerName" clearable placeholder="配送商名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称" style="width: 100%">
              <el-input v-model="queryParams.productName" clearable placeholder="产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置</el-button>
              <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :lg="4">
      <table-tools>
        <template #btn>
          <div style="display: flex; justify-content: flex-end">
            <table-cell-setting :checked="checkListData" :table-option="tableOption" @checkList="checkList" />
          </div>
        </template>
      </table-tools>
    </el-col>
  </el-row>

  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
    @row-click="aloneClick" @sort-change="handlSort">
    <el-table-column v-if="checkListData.indexOf('qudao') !== -1" :min-width="160" :show-overflow-tooltip="true" fixed
      header-align="center" label="配送商名称" prop="index">
      <template #default="{row}">
        <span v-if="queryParams.creditType === 'agent'">{{ row.agentDetail?.agentName }}</span>
        <span v-if="queryParams.creditType === 'agent_person'" />
        <span v-if="queryParams.creditType === 'distribute'">{{ row.distributeInfoDetail?.distributeName }}</span>
      </template>
    </el-table-column>

    <el-table-column v-if="checkListData.indexOf('productPopularName') !== -1" :min-width="160"
      :show-overflow-tooltip="true" header-align="center" label="通用名" prop="productInfoDetail.productPopularName" />

    <el-table-column v-if="checkListData.indexOf('productName') !== -1" :min-width="160" :show-overflow-tooltip="true"
      header-align="center" label="商品名" prop="productInfoDetail.productName" />

    <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="生产厂家"
      prop="productInfoDetail.producer" />

    <el-table-column v-if="checkListData.indexOf('approvalNumber') !== -1" :min-width="160"
      :show-overflow-tooltip="true" header-align="center" label="批准文号" prop="productInfoDetail.approvalNumber" />

    <el-table-column v-if="checkListData.indexOf('packSpecs') !== -1" :min-width="120" :show-overflow-tooltip="true"
      header-align="center" label="包装规格" prop="productInfoDetail.packSpecs" />

    <el-table-column v-if="checkListData.indexOf('stock') !== -1" :min-width="120" :show-overflow-tooltip="true"
      align="center" label="上月结余库存" prop="stock" />

    <el-table-column v-if="checkListData.indexOf('thisMonthDeliveryAmount') !== -1" :min-width="120"
      :show-overflow-tooltip="true" align="center" label="本月发货量" prop="thisMonthDeliveryAmount" />

    <el-table-column v-if="checkListData.indexOf('thisMonthDistributeAmount') !== -1" :min-width="120"
      :show-overflow-tooltip="true" align="center" label="本月配送量" prop="thisMonthDistributeAmount" />

    <el-table-column v-if="checkListData.indexOf('currentStock') !== -1" :min-width="120" :show-overflow-tooltip="true"
      align="center" fixed="right" label="当前库存" prop="currentStock" sortable="custom" />

    <el-table-column v-if="checkListData.indexOf('capacity') !== -1" :min-width="140" :show-overflow-tooltip="true"
      align="center" fixed="right" label="允许最大库存上限" prop="capacity">
      <template #default="{row}">
        <span v-if="row.capacity === 0">不限额</span>
        <span v-else> {{ row.capacity }}</span>
      </template>
    </el-table-column>

  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
    style="display: flex; justify-content: flex-end" @pagination="handlList" />
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { crmStore } from "@CRM/store";

export default {
  name: "Index",
  setup() {
    const api = inject("api");
    const router = useRouter();
    // 搜索对象
    var data = reactive({
      queryParams: {
        creditType: "distribute",
        customerName: "",
        productName: "",
        pageSize: 20,
        page: 1,
      },
      tableData: [],
      total: 0,
      terminalTypeData:
        crmStore.getters["dictionary/getDictionary"]["terminal_status"],
      tableOption: [
        { key: "qudao", value: "配送商名称" },
        { key: "productPopularName", value: "通用名" },
        { key: "productName", value: "产品名" },
        { key: "producer", value: "生产厂家" },
        { key: "approvalNumber", value: "批准文号" },
        { key: "packSpecs", value: "包装规格" },
        { key: "stock", value: "上月结余库存" },
        { key: "thisMonthDeliveryAmount", value: "本月发货量" },
        { key: "thisMonthDistributeAmount", value: "本月配送量" },
        { key: "currentStock", value: "当前库存" },
        { key: "capacity", value: "允许最大库存上限" },
      ],
      checkListData: [
        "qudao",
        "productPopularName",
        "productName",
        "producer",
        "approvalNumber",
        "packSpecs",
        "stock",
        "thisMonthDeliveryAmount",
        "thisMonthDistributeAmount",
        "currentStock",
        "capacity",
      ],
    });

    const checkList = (checked) => {
      data.checkListData = checked;
    };
    const currentInstance = getCurrentInstance();

    // 获取列表
    const handlList = () => {
      api.stockSellStorage
        .STOCKSELLSTORAGE_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || [];
            data.total = res.data.total;
          }
        });
    };

    const handlChange = (val) => {
      data.queryParams.creditType = val;
      data.queryParams.page = 1;
      handlList();
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 重置
    const handlReset = () => {
      data.queryParams = {
        creditType: "distribute",
        customerName: "",
        productName: "",
        pageSize: 20,
        page: 1,
      };
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      const a = JSON.stringify(row);
      router.push({
        name: "distributoreReturnedRecords",
        query: {
          id: row.distributeInfoDetail.id,
          ids: row.productInfoDetail.id,
          row: a,
        },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "当前库存") {
          switch (row.order) {
            case "ascending":
              data.queryParams.deliveryTimeSort = "asc";
              break;
            case "descending":
              data.queryParams.deliveryTimeSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    onMounted((_) => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlList,
      handlChange,
      handlSearch,
      handlReset,
      aloneClick,
      cellStyle,
      checkList,
      handlSort,
    };
  },
};
</script>

<style scoped>
</style>
